<template>
  <div class="activity-login-wrapper">
    <div class="wrapper-logo">
      <img class="logo" :src="logoSrc" />
    </div>
    <van-popup v-model:show="showPopup" round :close-on-click-overlay="false" :style="{ width: '500px' }">
      <div class="wrapper-login">
        <el-tabs v-model="activeTab">
          <!-- 登录 -->
          <el-tab-pane label="登录" name="login">
            <el-form
              ref="loginFormRef"
              label-position="right"
              :model="loginForm"
              :rules="loginRules"
            >
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="loginForm.mobile" placeholder="请输入手机号" maxlength="18"></el-input>
              </el-form-item>
              <el-form-item label="密　码" prop="password">
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  show-password
                  placeholder="请输入密码"
                  maxlength="18"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleLogin">登录</el-button>
                <el-button @click="showResetPasswordTip">忘记密码?</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 注册 -->
          <el-tab-pane label="注册" name="register">
            <el-form
              ref="registerFormRef"
              label-position="right"
              :model="registerForm"
              :rules="registerRules"
            >
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="registerForm.mobile" placeholder="请输入手机号" maxlength="18"></el-input>
              </el-form-item>
              <el-form-item label="密　码" prop="password">
                <el-input
                  v-model="registerForm.password"
                  type="password"
                  placeholder="请设置密码"
                  maxlength="18"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="password2">
                <el-input
                  v-model="registerForm.password2"
                  type="password"
                  placeholder="请再次输入密码"
                  maxlength="18"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleRegister">注册</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </van-popup>
  </div>
</template>
<style lang="less" scoped>
// prettier-ignore
.activity-login-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('@/assets/images/scb.jpg') no-repeat center;
  background-size: cover;

  .wrapper-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
  }

  .wrapper-logo {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;

    .logo {
      margin-left: 50px;
      margin-top: 15px;
      display: block;
      width: 200px;
      height: 200px; /* 新增，设置高度与宽度一致 */
      border-radius: 50%; /* 将图片设置为圆形 */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影 */
      object-fit: cover; /* 确保图片填充圆形 */
    }
  }

  .wrapper-login {
    padding: 30px;

    .title {
      font-size: 16px;
      text-align: center;
      font-weight: 500;
      margin-bottom: 10px;
    }

    .text {
      font-size: 14px;
      text-align: center;
      color: #999;
      margin-bottom: 20px;
    }

    .input {
      width: 100%;
      margin: 20px 0;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    .btn {
      margin: 40px 0 0;
    }
  }
}

@media (max-width: 768px) {
  .activity-login-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('@/assets/images/scb.jpg') no-repeat center;
    background-size: cover;

    .wrapper-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.2);
    }

    .wrapper-logo {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9999;

      .logo {
        margin-left: 70px;
        margin-top: 15px;
        display: block;
        width: 190px;
        height: 190px; /* 新增，设置高度与宽度一致 */
        border-radius: 50%; /* 将图片设置为圆形 */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影 */
        object-fit: cover; /* 确保图片填充圆形 */
      }
    }

    .wrapper-login {
      padding: 30px;

      .title {
        font-size: 16px;
        text-align: center;
        font-weight: 500;
        margin-bottom: 10px;
      }

      .text {
        font-size: 14px;
        text-align: center;
        color: #999;
        margin-bottom: 20px;
      }

      .input {
        width: 100%;
        margin: 20px 0;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }

      .btn {
        margin: 40px 0 0;
      }
    }
  }
}
</style>
<script lang="ts" setup>
import * as Vue from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/useStore'
import * as httpService from '@/services/apply.service'
import { ElMessage } from 'element-plus'
import logoImg from '@/assets/images/scb.jpg'

const logoSrc = Vue.ref(logoImg)
const router = useRouter()
const userStore = useUserStore()

const showPopup = Vue.ref(false)
const dialogVisible = Vue.ref(true)
const activeTab = Vue.ref('login')

// 登录表单
const loginFormRef = Vue.ref<HTMLFormElement | null>(null)
const loginForm = Vue.ref({ mobile: '', password: '' })
const loginRules = {
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
}

// 注册表单
const registerFormRef = Vue.ref<HTMLFormElement | null>(null)
const registerForm = Vue.ref({ mobile: '', password: '', password2: '' })
const registerRules = {
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请设置密码', trigger: 'blur' }
  ],
  password2: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (rule: any, value: string, callback: any) => {
        if (value!== registerForm.value.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 登录
const handleLogin = () => {
  if (!loginFormRef.value) return
  loginFormRef.value.validate(async (valid: any) => {
    if (!valid) return
    try {
      await userStore.userLogin(loginForm.value)
      ElMessage.success('登录成功')
      router.replace({ name: 'Home' })
    } catch (error: any) {
      console.log(error.message)
      // ElMessage.error(error.message)
    }
  })
}

// 注册
const handleRegister = () => {
  if (!registerFormRef.value) return
  registerFormRef.value.validate(async (valid: any) => {
    if (!valid) return
    try {
      await httpService.userRegister(registerForm.value)
      ElMessage.success('注册成功，请登录')
      registerForm.value = { mobile: '', password: '', password2: '' }
      activeTab.value = 'login'
    } catch (error: any) {
      console.log(error.message)
      // ElMessage.error(error.message)
    }
  })
}

// 显示重置密码提示
const showResetPasswordTip = () => {
  ElMessage.warning('请联系管理员重置密码')
}

// 允许外部调用 openDialog 方法
const openDialog = () => {
  dialogVisible.value = true
}
defineExpose({ openDialog })

Vue.onBeforeMount(async () => {
  setTimeout(() => {
    showPopup.value = true
  }, 200)
})
</script>